@emailStaticView: email-static-view;

.@{emailStaticView} {
  height: 100%;
  color: @color-text-paragraph;
  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &-container {
    position: relative;
    height: 100%;
    width: 100%;
  }
  &-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  &-base {
    padding: @h-spacing-md @v-spacing-lg;
    .hairline('bottom');
    &-right {
      position: relative;
      display: inline-block;
      @diff: 50 * @hd;
      width: calc(~'100% - @{diff}');
      height: 40 * @hd;
      margin-left: @v-spacing-md;
      &-name {
        .ellipsis;
        display: inline-block;
        width: 100%;
      }
      &-date {
        position: absolute;
        bottom: 0;
        color: @color-text-caption;
        width: 100%;
        .senddate {
          .ellipsis;
          display: inline-block;
          max-width: calc(~'100% - '90 * @hd);
        }
      }
      &-reciever {
        position: absolute;
        right: 0;
        color: @brand-primary;
        .am-icon {
          color: @fill-disabled;
          vertical-align: top;
          margin-left: 2 * @hd;
        }
      }
    }
  }
  &-base.english {
    .@{emailStaticView}-base-right {
      height: 60 * @hd;
      &-reciever {
        position: relative;
        display: inline-block;
        float: right;
      }
    }
  }
  &-complete {
    .hairline('bottom');
    padding: 0 @v-spacing-lg;
    &-to {
      padding-top: @h-spacing-md;
      &-item {
        display: flex;
        padding-bottom: @h-spacing-md;
        &-title {
          display: inline-block;
          height: 25 * @hd;
          line-height: 25 * @hd;
          color: @color-text-caption;
          flex-shrink: 0;
        }
        &-detail {
          position: relative;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-left: 10 * @hd;
          box-sizing: border-box;
          width: auto;
          &-unread, &-readed {
            display: inline-block;
            background: fade(@fill-disabled, 30%);
            border-radius: @radius-xs;
            height: 25 * @hd;
            line-height: 25 * @hd;
            padding: 0 @v-spacing-sm;
            margin-right: @v-spacing-sm;
            margin-bottom: @h-spacing-md;
            white-space: nowrap;
          }
          &-unread {
            background: @fill-body;
          }
          &-tip {
            color: @brand-important;
          }
          &-name {
            color: @color-text-caption;
          }
          .am-icon {
            position: relative;
            top: 2 * @hd;
            padding-left: 3 * @hd;
          }
          .am-icon-mail-small {
            color: @brand-primary;
          }
          .am-icon-mail-read {
            top: 1 * @hd;
            color: @fill-disabled;
          }
        }
      }
    }
    &-unreadedcount {
      text-align: center;
      padding: 10 * @hd 0;
      color: @brand-primary;
      .hairline('top');
    }
  }
  &-content {
    flex: 1 1;
    position: relative;
    &-flex {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      padding-bottom: @h-spacing-md;
      box-sizing: border-box;
      padding: 0 @v-spacing-lg;
    }
    &-container {
      padding-bottom: @h-spacing-md;
      margin-bottom: @h-spacing-md;
      .hairline('bottom');
    }
    &-title {
      line-height: 24 * @hd;
      padding-top: @h-spacing-md;
      font-size: @font-size-caption;
      &-subject {
        padding-right: 10 * @hd;
        word-break: break-all;
      }
      &-icon {
        position: relative;
        top: 1 * @hd;
        display: inline-block;
        width: 30 * @hd;
        text-align: left;
      }
      .am-icon-enclosure {
        color: @brand-primary;
        padding-left: @v-spacing-sm;
      }
    }
  }
  &-files {
    &-title {
      padding: @h-spacing-md 0;
      .hairline('bottom');
      color: @color-text-paragraph;
      .am-icon-enclosure {
        position: relative;
        top: 2 * @hd;
        padding-right: @h-spacing-md;
      }
    }
    &-list {
      padding: @h-spacing-sm 0;
      .am-list-body {
        border-bottom: none;
      }
      .am-list-body div:not(:last-child) .am-list-line {
        border-bottom: none;
      }
      .am-list-item {
        padding-left: 0;
        min-height: 36 * @hd;
      }
      .am-list-item .am-list-line {
        padding-right: 0;
      }
      .am-list-item .am-list-line .am-list-content {
        padding: @h-spacing-sm 0;
      }
      .am-flexbox .am-flexbox-item {
        &:last-child {
          margin-left: 0;
          padding-left: @h-spacing-md;
          width: 30 * @hd;
          flex: inherit;
          color: @color-text-caption;
        }
      }
      .wm-list-page-item-row {
        .ellipsis;
      }
      .wm-list-page-item-row-span-text-highlight {
        font-weight: normal;
        font-size: @font-size-caption-sm;
      }
      .wm-list-page-item-row {
        font-size: @font-size-caption-sm;
      }
    }
  }
}